<template>
  <div>
    <BasicModal
      @register="register"
      :title="title"
      width="1000px"
      :destroyOnClose="true"
      :canFullscreen="false"
      :showOkBtn="false"
      :showCancelBtn="false"
    >
      <BasicTable @register="registerTable" class="table-container" :max-height="300">
        <template #headerTop>
          <Button type="primary" @click="handleAdd(CustomModalTypeEnum.Add)">新增</Button>
        </template>
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'action'">
            <TableAction
              :actions="[
                {
                  label: '编辑',
                  tooltip: '编辑',
                  onClick: () => handleAdd(CustomModalTypeEnum.Edit, record),
                },

                {
                  label: '删除',
                  tooltip: '删除',
                  popConfirm: {
                    title: '是否删除该条数据？',
                    confirm: () => {
                      delMembershipTitleGroup(record.id).then(() => {
                        createMessage.success('删除成功');
                        handleAddReload();
                      });
                    },
                  },
                },
              ]"
          /></template>
        </template>
      </BasicTable>
      <AddedModal @register="addedRegister" @reload="handleAddReload" />
    </BasicModal>
  </div>
</template>

<script lang="ts" setup>
  import { BasicTable, useTable, TableAction } from '@/components/Table';
  import { BasicModal, useModal, useModalInner } from '@/components/Modal';
  import { Button } from 'ant-design-vue';
  import { ref } from 'vue';
  import { useMessage } from '@/hooks/web/useMessage';
  import { getSaasColumns } from './tableData';
  import AddedModal from './added.vue';
  import { CustomModalTypeEnum } from '@/enums/publicEnum';

  import {
    getMembershipTitleGroup,
    delMembershipTitleGroup,
  } from '@/api/platform/fieldValueManage/membershipTitle';
import { MembershipTitleGroup } from '@/api/platform/fieldValueManage/membershipTitle/type';
  const title = ref('职务类别分组管理');
  const { createMessage } = useMessage();

  const emit = defineEmits(['reload']);

  const [register, { closeModal }] = useModalInner();

  const [registerTable, { reload }] = useTable({
    api: getMembershipTitleGroup,
    columns: getSaasColumns(),
    showIndexColumn: true,
    clickToRowSelect: false,
    useSearchForm: false,
    showTableSetting: true,
    tableSetting: { fullScreen: true },
    actionColumn: {
      width: 120,
      title: '操作',
      fixed: 'right',
      dataIndex: 'action',
    },
    // formConfig: {
    //   labelWidth: 100,
    //   schemas: [
    //     {
    //       field: 'keyword',
    //       label: '关键词',
    //       component: 'Input',
    //       componentProps: {
    //         placeholder: '分组搜索',
    //       },
    //       colProps: {
    //         span: 6,
    //       },
    //     },
    //   ],
    // },
  });

  const [addedRegister, { openModal }] = useModal();

  function handleAdd(type: CustomModalTypeEnum, row?: Partial<MembershipTitleGroup>) {
    openModal(true, {
      type,
      row,
    });
  }

  const handleAddReload = () => {
    reload();
    emit('reload');
  };
</script>

<style lang="less" scoped></style>
